<template>
	<scroll-view class="steps-scroll" scroll-x :scroll-with-animation="true" show-scrollbar="false">
		<view class="steps-container">
			<view v-for="(item, index) in steps" :key="index" class="step-item" @click="handleClick(item,index)">
				<!-- 数字圈 + 连线 -->
				<view class="circle-wrapper">
					<view class="circle" :class="{ active: index  === currentStep }">
						{{ index + 1 }}
					</view>

					<!-- 连线 -->
					<view v-if="index < steps.length - 1" class="line">
					</view>
				</view>

				<!-- 文字部分 -->
				<view class="text-wrapper">
					<view style="width: 100%;">
						<slot name="title">
							<text style="overflow-wrap: break-word;">{{item[props.formmat.title]}}</text>
						</slot>

						<!-- <up-text v-if="!$slots['title']" :text="item[props.formmat.title]" lineHeight="20px"></up-text> -->
					</view>
					<view>
						<slot name="desc" :element="item">
						</slot>
						<up-text v-if="!$slots['desc']" :text="props.desc" type="tips" size="12"></up-text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	// import { defineProps } from "vue";


	const props = defineProps({
		steps: {
			type: Array,
			default: []
		},
		currentStep: {
			type: Number,
			default: 0
		},
		desc: {
			type: [String, Number],
			default: () => ""
		},
		formmat: {
			type: Object,
			default: () => {
				return {
					title: "title",
				}
			}
		}
	});

	const emit = defineEmits(['change']);
	function handleClick(item : any, index : number) {
		console.log(index);
		emit("change", item, index)
	}
</script>

<style scoped lang="scss">
	.steps-scroll {
		// white-space: nowrap;
		width: 100%;
		padding: 10rpx 0;
	}

	.steps-container {
		display: flex;
		// align-items: center;
		padding: 0 20rpx;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 200rpx;
		text-align: center;
	}

	.circle-wrapper {
		display: flex;
		align-items: center;
		position: relative;
	}

	.circle {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #ccc;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		transition: all 0.3s;
		z-index: 1;
	}

	.circle.active {
		background-color: #007aff;
	}

	.line {
		width: 100rpx;
		height: 4rpx;
		background-color: #ddd;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(25%, -50%);
		// transform: translateY(-50%);
		z-index: 0;
	}

	.line.active {
		background-color: #007aff;
	}

	.text-wrapper {
		margin-top: 10rpx;
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		padding: 0 8rpx;
	}

	.title {
		font-size: 26rpx;
		color: #333;
	}

	.title.active {
		color: #007aff;
		font-weight: bold;
	}

	.sub {
		font-size: 22rpx;
		color: #999;
	}
</style>